import React, { PureComponent } from "react";
import { push, goBack } from "react-router-redux";
import { connect } from "react-redux";
import style from "./style.less";
import { Form, Input, Button, DatePicker, Select } from "antd";
import experience from "../../assets/images/experience.png";
import add from "../../assets/images/add.png";
import education from "../../assets/images/experience.png";
import ErrTip from "../ErrTip";
const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;
class Perfection extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

  state = {
    startValue: null,
    endValue: null,
    endOpen: false
  };

  disabledStartDate = startValue => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

  disabledEndDate = endValue => {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };

  onChange = (field, value) => {
    this.setState({
      [field]: value
    });
  };

  onStartChange = value => {
    this.onChange("startValue", value);
  };

  onEndChange = value => {
    this.onChange("endValue", value);
  };

  handleStartOpenChange = open => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  };

  handleEndOpenChange = open => {
    this.setState({ endOpen: open });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { startValue, endValue, endOpen } = this.state;
    return (
      <div className={style.Perfectionbox}>
        <span className={style.Perinfo}>完善简历</span>
        <div className={style.experience}>
          <img src={experience} alt="" />
          <span>最近一份工作经历</span>
        </div>
        <Form onSubmit={this.handleSubmit} className={style.PerfectionForm}>
          <FormItem className={style.FormItem}>
            {getFieldDecorator("company", {
              rules: [
                { required: true, message: <ErrTip>请输入公司名称</ErrTip> }
              ]
            })(<Input placeholder="公司名称" />)}
          </FormItem>
          <FormItem className={style.FormItem + " " + style.last}>
            {getFieldDecorator("position", {
              rules: [
                { required: true, message: <ErrTip>请输入职位名称</ErrTip> }
              ]
            })(<Input placeholder="职位名称" />)}
          </FormItem>
          <FormItem className={style.FormItem}>
            <DatePicker
              disabledDate={this.disabledStartDate}
              showTime
              format="YYYY-MM"
              value={startValue}
              placeholder="开始时间"
              onChange={this.onStartChange}
              onOpenChange={this.handleStartOpenChange}
            />
          </FormItem>
          <FormItem className={style.FormItem + " " + style.last}>
            <DatePicker
              disabledDate={this.disabledEndDate}
              showTime
              format="YYYY-MM"
              value={endValue}
              placeholder="结束时间"
              onChange={this.onEndChange}
              open={endOpen}
              onOpenChange={this.handleEndOpenChange}
            />
          </FormItem>
          <FormItem className={style.FormItem}>
            {getFieldDecorator("money", {
              rules: [
                { required: true, message: <ErrTip>请输入目前薪水</ErrTip> }
              ]
            })(<Input placeholder="目前薪水" />)}
          </FormItem>
          <FormItem className={style.FormItem + " " + style.last}>
            <span>元/月</span>
          </FormItem>
          <TextArea
            rows={4}
            placeholder="岗位职责（可选填）"
            className={style.TextArea}
          />
          <div className={style.AddExperience}>
            <div className={style.addleft}>
              <img src={add} alt="" />
              <span>添加工作经验</span>
            </div>
            <span className={style.example}>查看示例</span>
          </div>
          <div className={style.examTemp}>
                <span>前厅部经理-岗位职责：</span>
                <p>1.负责酒店前厅部的接待和管理工作，熟知前厅服务设施的功能，处于完好状态；</p>
                <p>2.进行有关的市场计划分析制定部门工作计划，完成工作报告；</p>
                <p>3.使客房达到最高出租率，获取最佳的客房收入；</p>
                <p>4.督导下属部门主管，委托工作任务，明确岗位责任，随时调整工作部署；</p>
                <p>5.保持良好的客际关系，能独立有效地处理宾客投诉；</p>
                <p>6.协助酒店与更高一级领导处理突发事件。</p>
          </div>
          <div className={style.experience}>
            <img src={education} alt="" />
            <span>教育经历</span>
          </div>
          <FormItem className={style.FormItem}>
            {getFieldDecorator("school", {
              rules: [
                { required: true, message: <ErrTip>请输入学校名称</ErrTip> }
              ]
            })(<Input placeholder="学校名称" />)}
          </FormItem>
          <FormItem className={style.FormItem + " " + style.last}>
            {getFieldDecorator("specialty", {
              rules: [
                { required: true, message: <ErrTip>请输入专业名称</ErrTip> }
              ]
            })(<Input placeholder="专业名称" />)}
          </FormItem>
          <FormItem className={style.FormItem}>
            <Select placeholder="最高学历">
              <Option value="1">博士</Option>
              <Option value="2">硕士</Option>
              <Option value="3">本科</Option>
              <Option value="4">大专</Option>
            </Select>
          </FormItem>
          <FormItem className={style.FormItem + " " + style.last}>
            <Select placeholder="毕业时间">
              <Option value="1">2017</Option>
              <Option value="2">2018</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              className="Perfection-button"
            >
              完成
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    navigateTo: location => {
      dispatch(push(location));
    },
    goBack: () => {
      dispatch(goBack());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create()(Perfection));
